<template>
  <div
    style="
      background-color: #f0f2f5;
      width: 100%;

      overflow: hidden;
    "
  >
    <div class="typeArea">
      <div class="person">
        <div style="width: 560px; text-align: center">
          <img
            src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20210816114249107peiqi.jpg"
            alt=""
          />
          <div>admin</div>
        </div>
        <div>
          <div class="el-icon-collection-tag abouter">交互专家</div>
          <div class="el-icon-s-check abouter">
            不凡学院－某某某事业群－某某平台部－某某技术部－UED
          </div>
          <div class="el-icon-location-outline abouter">
            河南省 郑州市 金水区 绿地新都会
          </div>
        </div>
        <hr style="border: 1px dotted #f0f0f0; width: 95%; margin: 30px auto" />
        <div style="width: 95%; margin: 0 auto">
          <div style="font-size: 16px">标签</div>
          <div>
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag csser"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              >+</el-button
            >
          </div>
        </div>
        <hr style="border: 1px dotted #f0f0f0; width: 95%; margin: 30px auto" />
        <div class="group">
          <div class="groups">
            <div style="display: flex">
              <div>
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120152029983801.jpg"
                  alt=""
                  style="
                    width: 25px;
                    height: 25px;
                    margin-top: -5px;
                    margin-right: 5px;
                  "
                />
              </div>
              <div style="height: 25px">不凡UI设计组</div>
            </div>
          </div>
          <div class="groups">
            <div style="display: flex">
              <div>
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120152042345120151821.jpg"
                  alt=""
                  style="
                    width: 25px;
                    height: 25px;
                    margin-top: -5px;
                    margin-right: 5px;
                  "
                />
              </div>
              <div style="height: 25px">不凡前端开发组</div>
            </div>
          </div>
          <div class="groups">
            <div style="display: flex">
              <div>
                <img
                  src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"
                  alt=""
                  style="
                    width: 25px;
                    height: 25px;
                    margin-top: -5px;
                    margin-right: 5px;
                  "
                />
              </div>
              <div style="height: 25px">阿里支付组</div>
            </div>
          </div>
          <div class="groups">
            <div style="display: flex">
              <div>
                <img
                  src="https://cn.vuejs.org/images/logo.png"
                  alt=""
                  style="
                    width: 25px;
                    height: 25px;
                    margin-top: -5px;
                    margin-right: 5px;
                  "
                />
              </div>
              <div style="height: 25px">vue小组</div>
            </div>
          </div>
          <div class="groups">
            <div style="display: flex">
              <div>
                <img
                  src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
                  alt=""
                  style="
                    width: 25px;
                    height: 25px;
                    margin-top: -5px;
                    margin-right: 5px;
                  "
                />
              </div>
              <div style="height: 25px">全员都是吴彦祖</div>
            </div>
          </div>
          <div class="groups">
            <div style="display: flex">
              <div>
                <img
                  src="https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png"
                  alt=""
                  style="
                    width: 25px;
                    height: 25px;
                    margin-top: -5px;
                    margin-right: 5px;
                  "
                />
              </div>
              <div style="height: 25px">高逼格天团</div>
            </div>
          </div>
        </div>
      </div>
      <div class="project">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          style="width: 95%; margin: 0 auto"
        >
          <el-tab-pane label="文章" name="first">
            <div class="typeAreas">
              <div style="margin-top: 20px; margin-bottom: 10px">Vue</div>
              <div class="labels">
                <div class="label">Element</div>
                <div class="label">饿了么</div>
                <div class="label">设计语言</div>
              </div>
              <div style="font-size: 14px; margin-bottom: 15px">
                段落示意：element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
              </div>
              <div style="font-size: 13px; margin-left: 720px">
                周树人 2020-11-20 10:33
              </div>
              <span style="font-size: 13px"
                ><i class="el-icon-s-flag"></i> 125</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-thumb"></i>13453</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-chat-line-round"></i>222</span
              >
              <hr
                style="
                  border: 1px dotted #f0f0f0;
                  width: 95%;
                  margin: 30px auto;
                "
              />
            </div>
            <div class="typeAreas">
              <div style="margin-top: 20px; margin-bottom: 10px">Vue</div>
              <div class="labels">
                <div class="label">Element</div>
                <div class="label">饿了么</div>
                <div class="label">设计语言</div>
              </div>
              <div style="font-size: 14px; margin-bottom: 15px">
                段落示意：element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
              </div>
              <div style="font-size: 13px; margin-left: 720px">
                周树人 2020-11-20 10:33
              </div>
              <span style="font-size: 13px"
                ><i class="el-icon-s-flag"></i> 125</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-thumb"></i>13453</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-chat-line-round"></i>222</span
              >
              <hr
                style="
                  border: 1px dotted #f0f0f0;
                  width: 95%;
                  margin: 30px auto;
                "
              />
            </div>
            <div class="typeAreas">
              <div style="margin-top: 20px; margin-bottom: 10px">Vue</div>
              <div class="labels">
                <div class="label">Element</div>
                <div class="label">饿了么</div>
                <div class="label">设计语言</div>
              </div>
              <div style="font-size: 14px; margin-bottom: 15px">
                段落示意：element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
              </div>
              <div style="font-size: 13px; margin-left: 720px">
                周树人 2020-11-20 10:33
              </div>
              <span style="font-size: 13px"
                ><i class="el-icon-s-flag"></i> 125</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-thumb"></i>13453</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-chat-line-round"></i>222</span
              >
              <hr
                style="
                  border: 1px dotted #f0f0f0;
                  width: 95%;
                  margin: 30px auto;
                "
              />
            </div>
            <div class="typeAreas">
              <div style="margin-top: 20px; margin-bottom: 10px">Vue</div>
              <div class="labels">
                <div class="label">Element</div>
                <div class="label">饿了么</div>
                <div class="label">设计语言</div>
              </div>
              <div style="font-size: 14px; margin-bottom: 15px">
                段落示意：element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
              </div>
              <div style="font-size: 13px; margin-left: 720px">
                周树人 2020-11-20 10:33
              </div>
              <span style="font-size: 13px"
                ><i class="el-icon-s-flag"></i> 125</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-thumb"></i>13453</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-chat-line-round"></i>222</span
              >
              <hr
                style="
                  border: 1px dotted #f0f0f0;
                  width: 95%;
                  margin: 30px auto;
                "
              />
            </div>
            <div class="typeAreas">
              <div style="margin-top: 20px; margin-bottom: 10px">Vue</div>
              <div class="labels">
                <div class="label">Element</div>
                <div class="label">饿了么</div>
                <div class="label">设计语言</div>
              </div>
              <div style="font-size: 14px; margin-bottom: 15px">
                段落示意：element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
              </div>
              <div style="font-size: 13px; margin-left: 720px">
                周树人 2020-11-20 10:33
              </div>
              <span style="font-size: 13px"
                ><i class="el-icon-s-flag"></i> 125</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-thumb"></i>13453</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-chat-line-round"></i>222</span
              >
              <hr
                style="
                  border: 1px dotted #f0f0f0;
                  width: 95%;
                  margin: 30px auto;
                "
              />
            </div>
            <div class="typeAreas">
              <div style="margin-top: 20px; margin-bottom: 10px">Vue</div>
              <div class="labels">
                <div class="label">Element</div>
                <div class="label">饿了么</div>
                <div class="label">设计语言</div>
              </div>
              <div style="font-size: 14px; margin-bottom: 15px">
                段落示意：element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
              </div>
              <div style="font-size: 13px; margin-left: 720px">
                周树人 2020-11-20 10:33
              </div>
              <span style="font-size: 13px"
                ><i class="el-icon-s-flag"></i> 125</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-thumb"></i>13453</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-chat-line-round"></i>222</span
              >
              <hr
                style="
                  border: 1px dotted #f0f0f0;
                  width: 95%;
                  margin: 30px auto;
                "
              />
            </div>
            <div class="typeAreas">
              <div style="margin-top: 20px; margin-bottom: 10px">Vue</div>
              <div class="labels">
                <div class="label">Element</div>
                <div class="label">饿了么</div>
                <div class="label">设计语言</div>
              </div>
              <div style="font-size: 14px; margin-bottom: 15px">
                段落示意：element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
              </div>
              <div style="font-size: 13px; margin-left: 720px">
                周树人 2020-11-20 10:33
              </div>
              <span style="font-size: 13px"
                ><i class="el-icon-s-flag"></i> 125</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-thumb"></i>13453</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-chat-line-round"></i>222</span
              >
              <hr
                style="
                  border: 1px dotted #f0f0f0;
                  width: 95%;
                  margin: 30px auto;
                "
              />
            </div>
            <div class="typeAreas">
              <div style="margin-top: 20px; margin-bottom: 10px">Vue</div>
              <div class="labels">
                <div class="label">Element</div>
                <div class="label">饿了么</div>
                <div class="label">设计语言</div>
              </div>
              <div style="font-size: 14px; margin-bottom: 15px">
                段落示意：element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。element，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
              </div>
              <div style="font-size: 13px; margin-left: 720px">
                周树人 2020-11-20 10:33
              </div>
              <span style="font-size: 13px"
                ><i class="el-icon-s-flag"></i> 125</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-thumb"></i>13453</span
              >
              <span>丨</span>
              <span style="font-size: 13px"
                ><i class="el-icon-chat-line-round"></i>222</span
              >
              <hr
                style="
                  border: 1px dotted #f0f0f0;
                  width: 95%;
                  margin: 30px auto;
                "
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="项目" name="second">
            <div class="boxx">
              <img
                src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120163137052iXjVmWVHbCJAyqvDxdtx.png"
                alt=""
                style="width: 200px; height: 120px"
              />
              <div style="margin-left: 5px">不凡学院</div>
              <div style="margin: 4px; font-size: 12px">
                那是一种内在的东西， 他们到达不了，也无法触及的
              </div>
              <div
                style="
                  font-size: 12px;
                  color: gray;
                  margin-left: 5px;
                  margin-top: 10px;
                "
              >
                1天前
              </div>
              <div class="picture">
                <img
                  src="https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png"
                  alt=""
                  style="width: 20px; height: 20px; border-radius: 10px"
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120165417366ZiESqWwCXBRQoaPONSJe.png"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120152029983801.jpg"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
              </div>
            </div>
            <div class="boxx">
              <img
                src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120163137052iXjVmWVHbCJAyqvDxdtx.png"
                alt=""
                style="width: 200px; height: 120px"
              />
              <div style="margin-left: 5px">不凡学院</div>
              <div style="margin: 4px; font-size: 12px">
                那是一种内在的东西， 他们到达不了，也无法触及的
              </div>
              <div
                style="
                  font-size: 12px;
                  color: gray;
                  margin-left: 5px;
                  margin-top: 10px;
                "
              >
                1天前
              </div>
              <div class="picture">
                <img
                  src="https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png"
                  alt=""
                  style="width: 20px; height: 20px; border-radius: 10px"
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120165417366ZiESqWwCXBRQoaPONSJe.png"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120152029983801.jpg"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
              </div>
            </div>
            <div class="boxx">
              <img
                src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120163137052iXjVmWVHbCJAyqvDxdtx.png"
                alt=""
                style="width: 200px; height: 120px"
              />
              <div style="margin-left: 5px">不凡学院</div>
              <div style="margin: 4px; font-size: 12px">
                那是一种内在的东西， 他们到达不了，也无法触及的
              </div>
              <div
                style="
                  font-size: 12px;
                  color: gray;
                  margin-left: 5px;
                  margin-top: 10px;
                "
              >
                1天前
              </div>
              <div class="picture">
                <img
                  src="https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png"
                  alt=""
                  style="width: 20px; height: 20px; border-radius: 10px"
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120165417366ZiESqWwCXBRQoaPONSJe.png"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120152029983801.jpg"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
              </div>
            </div>
            <div class="boxx">
              <img
                src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120163137052iXjVmWVHbCJAyqvDxdtx.png"
                alt=""
                style="width: 200px; height: 120px"
              />
              <div style="margin-left: 5px">不凡学院</div>
              <div style="margin: 4px; font-size: 12px">
                那是一种内在的东西， 他们到达不了，也无法触及的
              </div>
              <div
                style="
                  font-size: 12px;
                  color: gray;
                  margin-left: 5px;
                  margin-top: 10px;
                "
              >
                1天前
              </div>
              <div class="picture">
                <img
                  src="https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png"
                  alt=""
                  style="width: 20px; height: 20px; border-radius: 10px"
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120165417366ZiESqWwCXBRQoaPONSJe.png"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120152029983801.jpg"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
              </div>
            </div>
            <div class="boxx">
              <img
                src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120163137052iXjVmWVHbCJAyqvDxdtx.png"
                alt=""
                style="width: 200px; height: 120px"
              />
              <div style="margin-left: 5px">不凡学院</div>
              <div style="margin: 4px; font-size: 12px">
                那是一种内在的东西， 他们到达不了，也无法触及的
              </div>
              <div
                style="
                  font-size: 12px;
                  color: gray;
                  margin-left: 5px;
                  margin-top: 10px;
                "
              >
                1天前
              </div>
              <div class="picture">
                <img
                  src="https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png"
                  alt=""
                  style="width: 20px; height: 20px; border-radius: 10px"
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120165417366ZiESqWwCXBRQoaPONSJe.png"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120152029983801.jpg"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
              </div>
            </div>
            <div class="boxx">
              <img
                src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120163137052iXjVmWVHbCJAyqvDxdtx.png"
                alt=""
                style="width: 200px; height: 120px"
              />
              <div style="margin-left: 5px">不凡学院</div>
              <div style="margin: 4px; font-size: 12px">
                那是一种内在的东西， 他们到达不了，也无法触及的
              </div>
              <div
                style="
                  font-size: 12px;
                  color: gray;
                  margin-left: 5px;
                  margin-top: 10px;
                "
              >
                1天前
              </div>
              <div class="picture">
                <img
                  src="https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png"
                  alt=""
                  style="width: 20px; height: 20px; border-radius: 10px"
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120165417366ZiESqWwCXBRQoaPONSJe.png"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120152029983801.jpg"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
              </div>
            </div>
            <div class="boxx">
              <img
                src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120163137052iXjVmWVHbCJAyqvDxdtx.png"
                alt=""
                style="width: 200px; height: 120px"
              />
              <div style="margin-left: 5px">不凡学院</div>
              <div style="margin: 4px; font-size: 12px">
                那是一种内在的东西， 他们到达不了，也无法触及的
              </div>
              <div
                style="
                  font-size: 12px;
                  color: gray;
                  margin-left: 5px;
                  margin-top: 10px;
                "
              >
                1天前
              </div>
              <div class="picture">
                <img
                  src="https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png"
                  alt=""
                  style="width: 20px; height: 20px; border-radius: 10px"
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120165417366ZiESqWwCXBRQoaPONSJe.png"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120152029983801.jpg"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
              </div>
            </div>
            <div class="boxx">
              <img
                src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120163137052iXjVmWVHbCJAyqvDxdtx.png"
                alt=""
                style="width: 200px; height: 120px"
              />
              <div style="margin-left: 5px">不凡学院</div>
              <div style="margin: 4px; font-size: 12px">
                那是一种内在的东西， 他们到达不了，也无法触及的
              </div>
              <div
                style="
                  font-size: 12px;
                  color: gray;
                  margin-left: 5px;
                  margin-top: 10px;
                "
              >
                1天前
              </div>
              <div class="picture">
                <img
                  src="https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png"
                  alt=""
                  style="width: 20px; height: 20px; border-radius: 10px"
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120165417366ZiESqWwCXBRQoaPONSJe.png"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
                <img
                  src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120152029983801.jpg"
                  alt=""
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    margin-left: -10px;
                  "
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicTags: ['不凡人', '学霸', '专业设计', '高颜值', '随便'],
      inputVisible: false,
      inputValue: '',
      activeName: 'first',
    }
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
  },
}
</script>

<style lang="scss">
.typeArea {
  width: 95%;
  height: 1800px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 30px;
  overflow: hidden;
  display: flex;
}
.person {
  width: 560px;
  height: 570px;
  border: 1px solid #ebeef5;
  margin: 15px;

  img {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    margin-top: 30px;
  }
}
.abouter {
  display: block;
  font-size: 15px;
  width: 95%;
  margin: 10px auto;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  color: black !important;
  border: hidden;
  font-size: 17px;
  margin-left: 10px;
}
.input-new-tag {
  width: 60px;
  margin-left: 10px;
  vertical-align: bottom;
}
.group {
  width: 95%;

  margin: 0 auto;
}
.groups {
  width: 250px;
  float: left;
  margin-bottom: 20px;
}
.project {
  width: 61%;
  height: fit-content;
  border: 1px solid #ebeef5;
  margin: 15px;
}
.labels {
  width: fit-content;
  color: #409eff;
  display: flex;
  margin-bottom: 15px;
  .label {
    margin-right: 10px;
    background-color: #ecf5ff;
    font-size: 13px;
  }
}
.typeAreas {
  width: 95%;
  margin: 0 auto;
}
.picture {
  position: absolute;
  right: 15px;
  bottom: 10px;
}
.boxx {
  width: 200px;
  height: 210px;
  border: 1px solid #ebeef5;
  position: relative;
  float: left;
  margin: 10px 15px;
}
</style>